<template>
    <div class="page">

  <div   class="f-fl container">
      <div  class="header f-fl el-col el-col-24 el-col-xs-24 el-col-sm-24 el-col-md-24 el-col-lg-24 el-col-xl-24">
           <com-search ref="search" placeholder="请输入搜索内容"></com-search>
      </div>
      <div  class="header f-fl el-col el-col-24 el-col-xs-24 el-col-sm-24 el-col-md-24 el-col-lg-24 el-col-xl-24">
          <com-count :cur="curAllItems" :count="count" className="add">
              <a slot="header" @click='addRail'>添加围栏</a>
          </com-count>
      </div>
      <div  class="f-fl el-col el-col-24 el-col-xs-24 el-col-sm-24 el-col-md-24 el-col-lg-24 el-col-xl-24">
          <loading v-show="!isShow"></loading>
          <table class="table" v-show="isShow">
                <tr>
                    <td><p>围栏名称</p></td>
                    <td><p>围栏状态</p></td>
                    <td><p>驶入告警</p></td>
                    <td><p>驶出告警</p></td>
                    <td><p>创建时间</p></td>
                    <td><p>操作</p></td>
                </tr>
                 <template v-for="item in curPageData">
                     <tr>
                         <td><p :title="item.electronic_fence_name">{{item.electronic_fence_name}}</p></td>
                         <td><p :title="item.status=='disable'?'未激活':'已激活'">{{item.status=='disable'?'未激活':'已激活'}}</p></td>
                         <td><p>{{+item.warning_in?"是":"否"}}</p></td>
                         <td><p>{{+item.warning_out?"是":"否"}}</p></td>
                         <td><p :title="item.create_time|toLocaleDate">{{item.create_time|toLocaleDate}}</p></td>
                         <td><p>
                             <a class="blue" @click="editRail(item)">编辑</a>
                             <a class="blue" @click="deleteRail(item)">删除</a>
                         </p></td>
                     </tr>
                 </template>
          </table>
      </div>
      <div  class="f-fl el-col el-col-24 el-col-xs-24 el-col-sm-24 el-col-md-24 el-col-lg-24 el-col-xl-24">
          <turn-page :counts="count" ref='curP'></turn-page>
      </div>
      <addRail ref="addRail"></addRail>
  </div>

  </div>
</template>
<script>
    import comSelect from 'c/com_select/com_select_component'
    import comCount from 'c/com_count/count'
    import comSearch from 'c/com_search/search'
    import turnPage from 'c/turn_page/turn_page'
    import loading from 'c/com_loading/inline_loading'
    import addRail from 'c/rail/add_rail'
     export default{
        data(){
            return{
                page_size:10,
                page_num:1,
                search:'',
                controller:'',
                count:0,
                start_time:'',
                end_time:'',
                need_count:1,
                curAllItems:1,
                curPageData:[],
                isShow:false,
            }
        },
        created(){
           this.bind()
        },
        mounted(){
            this.init()
            this.getQuery()

        },
        components:{
           comSelect,
            comCount,
            turnPage,
            comSearch,
            loading,
            addRail,
        },
        methods:{
            bind(){
              this.$on('choose-selected-status',value=>{
                  this.controller=value
                  this.$refs.curP.chilFn(1)
                  this.page_num=1
                  this.getQuery()
              })
             this.$on('refresh',()=>{
                 store.loading.show()
                 this.getQuery()
             })
             this.$on('search',value=>{
                 this.search=value
                 this.$refs.curP.chilFn(1)
                 this.page_num=1
                 this.getQuery()
             })
            this.$on('turn-page',value=>{
                this.page_num=value
                this.getQuery()
            })


            },
            /*添加围栏*/
            addRail(){
                /*this.$router.push({path:'/rail/add/'})*/
                this.$refs.addRail.$emit('add-electric-fence')

            },
            editRail(item){
              this.$refs.addRail.$emit('edit-electric-fence',item)
            },
            deleteRail(item){
                this.$confirm('是否确定删除'+item.electronic_fence_name,{
                    type:'warning',
                    showCancelButton:true,
                    closeOnClickModal:false,
                }).then(()=>{
                    this.deleteRail1(item)
                }).catch(()=>{})
            },
            deleteRail1(item){
                this.$http.post('electronic_fence/delete_electronic_fence ',{
                    id:item.id
                }).then(res=>{
                    if(!res.result){
                        this.$message('操作成功')
                        this.$emit('refresh')
                    }
                })
            },

            init(){

            },
            getQuery(){
                 this.$http.get('electronic_fence/get_electronic_fence_list',{
                 page_size:this.page_size,
                 page_num:this.page_num,
                 search:this.search,
                 }).then(res=>{
                     if(!res.result){
                         this.curPageData=res.data.list
                         this.curAllItems= res.data.list.length
                         this.count=res.data.count
                         this.isShow=true
                     }
                 })
            },

        }
    }
</script>
<style lang="scss">
  .el-button,.el-button:active,.el-button:focus, .el-button:hover{
/*    width:100%;*/
	border:none;
	background:none;
	font-size:14px;
	color:#333;
  }
  .el-tag{
	border:none;
	background:none;
	color:#333;
  }
</style>
<style lang="scss" scoped>
  .page{
      height:100%;
      display:flex;
      flex:1;
  }

  .container{
    font-size:14px;
    background:#fff;
    margin-left:24px;
    width:100%;
      .header{
          height:60px;
          line-height:60px;
      }
     .table{
         width:100%;
         background: #F9FAFC;
         border:0;
         font-size:14px;
         table-layout: fixed;
         tr:nth-of-type(even){
             background:#fff;
         }
         tr{
             width:100%;
             height:44px;
             line-height:44px;
             border-bottom:1px #ccc solid;
             table-layout: fixed;
             td{
                 p{
                     overflow:hidden;
                     white-space:nowrap;
                     text-overflow:ellipsis;
                 }
                 text-align: left;
                 text-indent: 10px;
             }
             &:first-child{
                td{
                    border-top: 1px solid #DDD;
                    border-bottom: 1px solid #DDD;
                    border-left: 1px solid #DDD;
                    color: #3D5266;
                    font-size:16px;
                }
              }
           td:nth-of-type(1){
               width:270px;
                p{max-width:270px;}
           }
           td:nth-of-type(2){
               width:130px;
              p{max-width:130px;}
           }
           td:nth-of-type(3){
               width:130px;
              p{max-width:130px;}
           }
           td:nth-of-type(4){
               width:130px;
               p{max-width:130px;}
           }
           td:nth-of-type(5){
               width:230px;
              p{max-width:230px;}
           }
           td:nth-of-type(6){
               span{
                   padding:1px 5px;
                   border-radius: 2px;
               }
               .red{
                   border: 1px solid #E33244;
                   color: #E33244;
               }
               .green{
                   border: 1px solid #26BF8C;
                   color: #26BF8C;
               }
           }

         }

        .blue{
            color: #3494E7;
        }
        .red{
            color: #E33244;
        }
     }
  }
</style>